<template>
  <div class="map-echart">
    <BaseEchart :options="options"></BaseEchart>
  </div>
</template>

<script setup lang="ts">
// @ts-ignore
import BaseEchart from './BaseEchart.vue'
import * as echarts from 'echarts'
// @ts-ignore
import chinaData from './data/china.json'
// @ts-ignore
import data from './data/data.ts' //需要再地图中绘制的原点信息用来匹配经纬度
import { convertData } from '@/utils/utils' //格式化data数据
echarts.registerMap('china', chinaData as any) //注册中国地图，传入绘制信息

const options = {
  title: {
    text: '全国分布',
    left: 'center',
    textStyle: {
      color: 'black'
    }
  },

  visualMap: {
    min: 0,
    max: 6000,
    left: 20,
    bottom: 20,
    calculable: true,
    text: ['高', '低'],
    inRange: {
      color: ['rgb(70, 240, 252)', 'rgb(250, 220, 46)', 'rgb(245, 38, 186)']
    }
  },
  geo: {
    map: 'china',
    roam: 'scale',
    emphasis: {
      areaColor: '#f4cccc',
      borderColor: 'rgb(9, 54, 95)',
      itemStyle: {
        areaColor: '#f4cccc'
      }
    }
  },
  series: [
    {
      name: '销量',
      type: 'scatter',
      coordinateSystem: 'geo',
      data: convertData(data),
      symbolSize: 12,
      emphasis: {
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        }
      },
      label: {
        formatter: '{b}',
        position: 'right',
        show: true
      }
    },
    {
      type: 'map',
      map: 'china',
      geoIndex: 0,
      aspectScale: 0.75,
      tooltip: {
        show: true
      }
    }
  ]
}
</script>

<style lang="scss" scoped>
.map-echart {
  height: 400px;
}
</style>
